<template>
	<view class="content">
		<!-- <image class="logo" src="/static/logo.png"></image> -->
		<view class="text-area">
			<!-- <text class="title">{{title}}</text> -->
		</view>
		<button class="content-open" style="color: blue" @click="open">开</button>
		<button class="content-close" style="color: cadetblue" @click="close">关</button>
		<text class="wz">当前：{{state}}</text>
		<text class="link">服务状态：{{link}}</text>
		<text class="log">{{log}}</text>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				socketTask: null,
				state: '关闭',
				link: '断开',
				log: ''
			};
		},
		onLoad() {

		},
		created() {
			this.connectSocketInit()
		},
		methods: {
			connectSocketInit() {
				// 创建一个this.socketTask对象【发送、接收、关闭socket都由这个对象操作】
				this.socketTask = uni.connectSocket({
					// 【非常重要】必须确保你的服务器是成功的,如果是手机测试千万别使用ws://127.0.0.1:9099【特别容易犯的错误】
					url: "ws://192.168.124.22:8086/info/2",
					success(data) {
						var alog = "WebSocket尝试建立连接...";
						this.log = alog;
					},
				});

				// 消息的发送和接收必须在正常连接打开中,才能发送或接收【否则会失败】
				this.socketTask.onOpen((res) => {
					var blog = "WebSocket连接正常打开中...";
					this.log = blog;
					this.is_open_socket = true;
					// 注：只有连接正常打开中 ，才能正常成功发送消息
					this.socketTask.send({
						data: "握手",
						async success() {
							console.log("消息发送成功");
						},
					});
					// 注：只有连接正常打开中 ，才能正常收到消息
					this.socketTask.onMessage((res) => {
						this.link = '连接'
						if(res.data == 1) {
							this.state = '关闭'
						} else if(res.data == 0) {
							this.state = '开启'
						}
						console.log("收到服务器内容：" + res.data);
					});
				})
				// 这里仅是事件监听【如果socket关闭了会执行】
				this.socketTask.onClose(() => {
					this.link = '断开'
					var dlog = "服务端连接已关闭，尝试重连...";
					this.log = dlog;
					this.state = '关闭';
					// 断开重连
					this.reconnection(5000);
				});
			},
			// 断开重连
			reconnection(e) {
				setTimeout(() => {
				   this.connectSocketInit();
				 }, e);
			},

			open() {
				uni.request({
					url: 'http://192.168.124.22:8086/led',
					method: 'post',
					data: {
						'data': '1'
					}
				}).then(({
					data
				}) => {
					if (data) {
						this.$message.success(data)
						this.refreshList()
					}
					this.loading = false
				})
			},
			close() {
				uni.request({
					url: 'http://192.168.124.22:8086/led',
					method: 'post',
					data: {
						'data': '0'
					}
				}).then(({
					data
				}) => {
					if (data) {
						this.$message.success(data)
						this.refreshList()
					}
					this.loading = false
				})
			}
		}
	}
</script>

<style>
	.content-open {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 10px;
		width: 300rpx;
		font-size: 70px;
	}
	
	.content-close {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 10px;
		width: 300rpx;
		font-size: 70px;
	}

	.wz {
		display: flex;
		margin-top: 30px;
		align-items: center;
		justify-content: center;
		font-size: 40px;
	}
	
	.link {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 40px;
	}
	
	.log {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 20px;
		font-size: 20px;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
